<template>
  <div class="home">
    <!-- <h1>首页导航页面</h1> -->

    <div class="mainSection">
      <div id="atomImg1">
        <img
          src="../../public/imgs/home_bg.png"
          alt=""
          width="420px"
          height="620px"
        />
      </div>
      <div id="atomImg2">
        <img
          src="../../public/imgs/home_bg2.png"
          alt=""
          width="420px"
          height="620px"
        />
      </div>
      <div id="func_title">请选择对应功能</div>

      <div id="funcArea">
        <div
          id="display"
          class="funcCard"
          @click="toDisplay"
          @mouseover="changeImage1"
          @mouseleave="changeImage1f"
        >
          <div class="func_content">
            <div class="img_out">
              <img
                class="imgsAtt"
                id="displayImg"
                src="../../public/imgs/display_blue.png"
                alt=""
              />
            </div>
            <div class="content_text">成果展示</div>
            <div class="clickToEnter">点击进入-></div>
          </div>
        </div>
        <div
          id="padprase"
          class="funcCard"
          @click="toPdbprase"
          @mouseover="changeImage2"
          @mouseleave="changeImage2f"
        >
          <div class="func_content">
            <div class="img_out">
              <img
                id="padpraseImg"
                class="imgsAtt"
                src="../../public/imgs/pdbprase_blue.png"
                alt=""
              />
            </div>
            <div class="content_text">PDB文件解析</div>
            <div class="clickToEnter">点击进入-></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <div class="footer_con">Copyright 2022</div>
      <div class="footer_con">
        《基于结构相似性的无监督药物-靶点相互作用预测》
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {
    // HelloWorld
  },
  methods: {
    toDisplay() {
      this.$router.push({
        name: "display",
      });
    },
    toPdbprase() {
      this.$router.push({
        name: "pdbprase",
      });
    },
    //动态改变图片
    changeImage1() {
      let disImg = document.getElementById("displayImg");
      disImg.src = require("../../public/imgs/display_white.png");
    },
    changeImage1f() {
      let disImg = document.getElementById("displayImg");
      disImg.src = require("../../public/imgs/display_blue.png");
    },
    changeImage2() {
      let disImg = document.getElementById("padpraseImg");
      disImg.src = require("../../public/imgs/pdbprase_white.png");
    },
    changeImage2f() {
      let disImg = document.getElementById("padpraseImg");
      disImg.src = require("../../public/imgs/pdbprase_blue.png");
    },
  },
};
</script>
<style scoped>
body {
  margin: 0;
  padding: 0;
}
.home {
  user-select: none;
}

.mainSection {
  width: 500px;
  height: 400px;
  align-items: center;
  margin: 8.625rem auto;
}
#func_title {
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: -40px;
}
#atomImg1 {
  position: absolute;
  margin-left: -29%;
  margin-top: 0%;
}
#atomImg2 {
  position: absolute;
  margin-left: 32%;
  margin-top: 0%;
}
.main_area {
  display: flex;
  justify-content: center;
}
#funcArea {
  /* border: 1px solid black; */
  width: 31.25rem;
  height: 25rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.funcCard {
  display: flex;
  justify-content: center;
  border: 1px solid #9e9e9e;
  border-radius: 5px;
  /* background-color: rgb(209, 238, 255); */
  width: 13.75rem;
  height: 23.75rem;
  cursor: pointer;
}

.func_content {
  text-align: center;
}
.content_text {
  /* font-weight: bold; */
  position: relative;
  margin-top: 26px;
  font-size: 1.08rem;
}
.clickToEnter {
  position: relative;
  margin-top: 66px;
  font-size: 0.92rem;
  color: #7c7c7c;
}
.funcCard:hover {
  box-shadow: 1px 0 8px 4px rgb(243, 243, 243);
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease;
  transition-delay: 0s;
  background-color: #f1f8ff;
  border: 1px solid #46bbff;
}
.funcCard:hover .clickToEnter {
  color: #008cff;
}
.funcCard:hover .img_out {
  background: #10a7ff;
}
.img_out {
  width: 8.75rem;
  height: 8.75rem;
  background: #d1eeff;
  border-radius: 5rem;
  margin-top: 4rem;
}
.imgsAtt {
  width: 5rem;
  height: 5rem;
  position: relative;
  margin-top: 1.875rem;
}
.footer {
  position: absolute;
  width: 100%;
  margin: 0.0625rem auto;
  text-align: center;
  height: 5rem;
  line-height: 2.5rem;
  bottom: 0;
  background-color: #3f3f3f;
  cursor: default;
}
.footer_con {
  text-align: center;
  color: #f1f8ff;
}
</style>
